<script setup lang="ts">
import { PropType, ref, watch } from "vue";
import { ElTable } from "element-plus";
import { scrollToColumn } from '@/utils/gps/device'
import { gpsbus } from '@/utils/gps/event'
import { storeToRefs } from 'pinia'
import useDeviceStore from "@/store/gps/device";
import MaDictColumn from "@/components/ma-dict/ma-dict-column/index.vue";

const props = defineProps({
  tableData: {
    type: Array as PropType<any[]>,
    required: true
  }
})
const deviceStore = useDeviceStore()
const { checkedDeviceNodeId } = storeToRefs(deviceStore)

const tableRef = ref<InstanceType<typeof ElTable>>()

watch(
  () => checkedDeviceNodeId.value,
  () => {
    setCurrentRow()
  }
)
/**
 * 设置当前选中行,且定位到目标位置
 */
function setCurrentRow() {
  // nextTick(() => {
  //   const row = checkedDeviceInfoList.value?.find(item => item.imei === checkedDeviceImei.value)
  //   if (!tableRef.value) {
  //     return
  //   }
  //   tableRef.value.setCurrentRow(row)
  //   if (row) {
  //     scrollToColumn(tableRef.value, checkedDeviceInfoList.value!, checkedDeviceImei.value)
  //   }
  // })
}

/**
 *
 * @param row
 */
function rowClickEvent(row) {
  gpsbus.emit('deviceSetRow', row.imei)
}

</script>

<template>
  <el-table ref="tableRef" :data="props.tableData!" @row-click="rowClickEvent" border highlight-current-row>
    <el-table-column fixed type="index" label="序号" width="60" />
    <el-table-column fixed prop="plateNo" label="设备名称" />
    <el-table-column prop="imei" label="设备序号" width="150" />
    <el-table-column prop="occurTime" label="报警时间" width="200" />
    <ma-dict-column prop="type" label="报警类型" dict-type="alarm_type"></ma-dict-column>
    <el-table-column prop="occurNum" label="报警次数" width="120" />
    <ma-dict-column prop="processStatus" label="报警类型" dict-type="processing_status"></ma-dict-column>
    <el-table-column prop="imei" label="操作" width="120">
      <template #default="{row}">
        <el-button text type="success" size="small">解除报警</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
